<!-- 我的 -->
<template>
  <view class="min-h-screen bg-home">
    <logo-navbar title=""></logo-navbar>
    <view class="px-4 pt-3 pb-20">
      <view class="relative w-34 h-40 mb-4" @click="onNoticeList">
        <image class="w-34 h-40" src="/static/images/user/ic_notice.png" />
        <u-badge v-if="state.noticeNum > 0" :is-dot="true" :offset="[-4, -4]" type="error"></u-badge>
      </view>
      <!-- 登录信息 -->
      <view class="flex items-center">
        <view v-if="userInfo" class="flex-1 text-single" @click="navigate('/package_user/pages/mine/index')">
          <view class="flex items-center">
            <view class="c-#333 text-60 font-bold text-single">{{ userInfo.nickname || '' }}</view>
            <view v-if="userInfo.identity > 0" class="flex-shrink-0 tag-identity ml-3">{{ userInfo.identity == 1 ? '顾问' : '客户经理' }}
            </view>
            <image  v-if="isVip" :class="['ml-2 flex-shrink-0', userInfo.vip_level > 1 ? 'w-140 h-40' : 'w-112 h-28']"
              :src="`/static/images/user/ic_vip_tag_${vipLevel}.png`" />
          </view>
          <view class="mt-1 c-#515151 text-28 text-single">{{ userInfo.introduce || '' }}</view>
        </view>
        <view v-else class="flex-1">
          <view class="c-#333 text-60 font-bold" @click="navigate('/package_user/pages/common/login')">未登录</view>
          <view class="mt-1 c-#515151 text-28">请登录</view>
        </view>
        <image class="flex-shrink-0 w-130 h-130 rounded-full ml-4" @click="navigate('/package_user/pages/mine/index')"
          :src="userInfo.avatar ? userInfo.avatar : '/static/images/user/ic_def_avatar.png'"
          error-icon="/static/images/user/ic_logo.png" />
      </view>
      <!-- vip -->
      <view class="relative mt-9 h-118">
        <image class="absolute w-full h-118" src="/static/images/user/bg_vip.png" />
        <view class="flex items-center justify-between absolute z-2 px-4 w-full h-118">
          <view v-if="isVip" class="flex-1 flex flex-col justify-center relative h-118">
            <image :class="['absolute z-1 top-0 left-0', userInfo.vip_level > 1 ? 'w-222 h-78' : 'w-112 h-78']"
              :src="`/static/images/user/ic_vip_${vipLevel}.png`" />
            <view class="absolute left-0 bottom-16 z-2 c-white text-24"><text>{{ userInfo.vip_validity || ''
            }}</text><text class="ml-2">到期</text></view>
          </view>
          <view v-else class="flex-1 flex items-center">
            <image class="w-112 h-78" src="/static/images/user/ic_vip_common.png" />
            <view class="c-#999 text-28 ml-4">八大会员权益</view>
          </view>
          <view class="flex-shrink-0 btn-vip" @click="navigate('/package_user/pages/vip/add', true)">{{ isVip ? '会员中心'
            : '立即开通' }}</view>
        </view>
      </view>
      <!-- 会员权益 => 线下权益(vip以上会员等级显示) -->
      <!-- TODO: swiper面板指示点样式 -->
      <view v-if="userInfo && state.vipRightsList.length > 0">
        <view class="c-#333 text-40 font-bold mt-3 mb-2">会员权益</view>
        <swiper class="h-364 shadow-card bg-#fff" circular :autoplay="false" :current="state.currentIndex" :indicator-dots="true"
          indicator-active-color="#F4AF22" @change="onSwiperChange">
          <swiper-item class="flex" v-for="(month, index) in swiperPage" :key="index">
            <view class="w-full py-4 pb-6 grid grid-cols-4 gap-4">
              <view v-for="(item, index) in state.swiperData" :key="index" class="flex flex-col items-center">
                <image class="w-88 h-88 rounded-full" :src="item.icon" />
                <view class="mt-1 c-#333 text-24 text-center">{{ item.label }}</view>
              </view>
            </view>
          </swiper-item>
        </swiper>
      </view>
      <!-- 操作栏 -->
      <view class="shadow-card bg-#fff py-5 grid grid-cols-4 gap-4 mt-4">
        <view v-for="(item, index) in panelList" :key="index" class="flex flex-col items-center"
          @click="toPanel(item.url)">
          <image class="w-32 h-32" mode="aspectFit" :src="item.icon" />
          <view class="mt-1 c-#333 text-24 text-center">{{ item.label }}</view>
        </view>
      </view>
    </view>
    <button size="default" type="" open-type="contact">
      <view class="w-136 h-136 z-1000 fixed bottom-100 right-30">
        <image class="w-136 h-136" src="/static/images/common/ic_service.jpg"></image>
      </view>
    </button>
  </view>
</template>

<script setup>
import { navigate } from "@/common/util/uni";
import { panelList } from '@/common/constant/user.js'
import { useUserStore } from '@/store/user'
import { getMessageNum } from '@/common/http/module/notice.js'
import { getVipInfo } from '@/common/http/module/vip.js'

const userStore = useUserStore()

const state = reactive({
  noticeNum: 0, // 未读消息数量
  currentIndex: 0, // 轮播图当前index
  vipLevel: 0,
  vipRightsList: [], // 当前用户会员权益
  swiperData: [], // 每页轮播图数据
})
const userInfo = computed(() => userStore.userInfo)
// 是否为会员
const isVip = computed(() => userStore.isVip)

const vipLevelList = [
  { level: 'common', value: 1 },
  { level: 'gold', value: 2 },
  { level: 'platinum', value: 3 },
  { level: 'diamond', value: 4 },
]

watch(() => state.currentIndex, (val) => {
  fetchSwiperData(val)
})

watch(() => state.vipRightsList, (val) => {
  if (val) {
    // 获取会员权益第一页数据
    fetchSwiperData(0)
  }
}, { immediate: true })

const vipLevel = computed(() => {
  return vipLevelList.find(v => v.value == userInfo.value.vip_level)?.level
})

// 轮播图页数
const swiperPage = computed(() => {
  return Math.ceil(state.vipRightsList.length / 8)
})

// 获取轮播图当前页数据
function fetchSwiperData (i) {
  state.swiperData = state.vipRightsList && state.vipRightsList.slice(i * 8, 9)
}

// 监听轮播图变化
function onSwiperChange (e) {
  state.currentIndex = e.detail.current
}

// 跳转消息列表
function onNoticeList () {
  navigate('/package_user/pages/notice/list', true)
}

// 跳转操作栏
function toPanel (url) {
  navigate(url, true)
}

// 未读消息数量
async function loadNoticeNum () {
  const { data } = await getMessageNum()
  state.noticeNum = data ?? 0
}

// 会员权益
async function loadVipRights () {
  const { data } = await getVipInfo()
  // 课程折扣、专家答疑、在线考试固定显示
  if (data) {
    const vipRightsList = [
      { icon: '/static/images/user/ic_vip_rights1.png', label: `创建学社x${data.club_number}`, show: data.club_number > 0 },
      { icon: '/static/images/user/ic_vip_rights2.png', label: '免费视频课程', show: data.free_watch },
      // { icon: '/static/images/user/ic_vip_rights3.png', label: '观看直播', show: true },
      { icon: '/static/images/user/ic_vip_rights4.png', label: '创建年规', show: data.create_plan },
      { icon: '/static/images/user/ic_vip_rights5.png', label: '私董会服务', show: data.private_service },
      { icon: '/static/images/user/ic_vip_rights6.png', label: '课程折扣', show: true },
      { icon: '/static/images/user/ic_vip_rights7.png', label: '专家答疑', show: true },
      { icon: '/static/images/user/ic_vip_rights8.png', label: '在线考试', show: true },
      { icon: '/static/images/user/ic_vip_rights9.png', label: '线下权益', show: data.offline_right },
    ]
    state.vipRightsList = vipRightsList.filter(v => v.show)
  }
}

function loadData () {
  loadNoticeNum()
  loadVipRights()
}

onShow(() => {
  if (userStore.isLogin) {
    loadData()
  }
})
</script>

<style lang="scss" scoped>
.bg-home {
  background: linear-gradient(0deg,
      rgba(246, 246, 246, 1) 0%,
      rgba(249, 249, 249, 1) 50.76%,
      rgba(249, 249, 249, 1) 51%,
      rgba(255, 251, 239, 1) 97.54%,
      rgba(255, 251, 238, 1) 100%);
}

.btn-vip {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4rpx 18rpx;
  border-radius: 12rpx;
  border: 2rpx solid #F4AF22;
  color: #F4AF22;
  font-size: 28rpx;
}
</style>
